<template>
	<div class="dev_box">
		<div class="dev_header flex_a">
			<a-input  v-model:value="inputValue" placeholder="搜索" allow-clear >
			 <template #suffix >
			   <svg-icon icon-class="查询,默认"  style="width: 22px;height: 22px;" class="icon" ></svg-icon>
			  </template>
			</a-input>
			<MyButton class="reaset" @click="onRest"  title="取消所有选中项目" />
			<MyButton class="reaset" @click="onallShow"  title="结果全部可见/不可见" />
			<p>已选：<span>{{ setLength().length }}项</span></p>
		</div>
		<table>
			<thead>
				<tr>
					<th v-for="item in thlist" :key="item">{{ item }}</th>
				</tr>
			</thead>
			<tbody>
				<tr class="table_td" v-for="(item,index) in tdlist" :key="index" @click.stop="onSelect(item)" v-show="item.show">
					<td>{{item.name}}</td>
					<td><a-checkbox v-model:checked="item.checked" @change="checkedChange(item)" @click.stop></a-checkbox></td>
					<td><a-input-number v-model:value="item.sorce" :min="1" :max="99" @change="numberChange(item)" @click.stop /></td>
					<td><a-checkbox v-model:checked="item.selectd" @click.stop @change="selectdChange(item)"></a-checkbox></td>
				</tr>
			</tbody>
		</table>
		
		<div class="bottom-btn">
			<div style="margin-right: 10px;">
				<span style="width:90px;font-family: 'Roboto-Regular';"> 有效时间：</span>
				<svg-icon icon-class="日期" style="margin-right: 5px;" class="icon"></svg-icon>&nbsp;
				<a-range-picker v-model:value="timer" :disabledDate="disabledDate" style="font-family: 'Roboto-Medium';" />
			</div>
			<MyButton class="reaset" @click="$emit('onReset')" title="取消" />
			<MyButton class="submit" @click="$emit('onSubmit', { data:setLength(), timer })" title="保存" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { watch, ref, computed } from "vue";
	import moment from "moment";
	import cloneDeep from 'lodash/cloneDeep';
	import { useItem } from "@/store";
	import debounce from "@/utils/debounce";
	
	const ItemStore = useItem();
	ItemStore.getItemFn();
	
	const inputValue = ref('');
	const thlist = ['项目名称','显示结果','次数','选择'];
	const tdlist = ref([]);
	const ItemList = computed(()=> ItemStore.$state.ItemList);
	const length = ref(0);
	const timer = ref<any>([]);
	
	// 限制时间从今天开始
	const disabledDate = (currentDate: any) => {
		return currentDate && currentDate < moment().subtract(1, 'days').endOf('day');
	};
	
	const onSelect = (row)=>{
		console.log(row);
	};
	
	function setLength(){
		return tdlist.value.filter((item)=> item.selectd);
	}
	
	const onallShow = ()=>{
		const arr = tdlist.value.filter((item)=> item.checked);
		if(arr.length  === tdlist.value.length ){
			tdlist.value = tdlist.value.map((item)=> ({ ...item,checked:false  }))
		}else{
			tdlist.value = tdlist.value.map((item)=> ({ ...item,checked:true,selectd:true,sorce:1 }));
		}
	};
	
	const onRest = ()=>{
		tdlist.value = tdlist.value.map((item)=> ({ ...item,selectd:false,checked:false,sorce:''  }));
	};
	
	const numberChange = (row)=>{
		if(row.sorce){
			tdlist.value = tdlist.value.map((item)=> ({ ...item,selectd:item.id == row.id?true:item.selectd }));
		}else{
			tdlist.value = tdlist.value.map((item)=> ({ ...item,selectd:item.id == row.id?false:item.selectd,checked:item.id == row.id?false:item.checked }));
		}
	};
	
	const checkedChange = (row)=>{
		// console.log(row.checked)
		if(row.checked){
			tdlist.value = tdlist.value.map((item)=> ({ 
				...item,selectd:item.id == row.id?true:item.selectd,
				sorce:item.id == row.id?(item.sorce > 1?item.sorce:1):item.sorce, 
			}));
		}
	};
	
	const selectdChange = (row)=>{
		if(row.selectd){
			tdlist.value = tdlist.value.map((item)=> ({ ...item,sorce:item.id == row.id?(item.sorce > 1?item.sorce:1):item.sorce }));
		}else{
			tdlist.value = tdlist.value.map((item)=> ({ ...item,sorce:item.id == row.id?(item.selectd ?item.sorce:''):item.sorce,checked:item.id == row.id?false:item.checked }));
		}
	};
	
	watch(()=>inputValue.value,debounce(()=>{
		tdlist.value = tdlist.value.map((item)=> ({ ...item,show:item.name.includes(inputValue.value) }));
		// console.log(inputValue.value)
	}), 50);
	
	watch(()=>ItemList.value,()=>{
		tdlist.value = cloneDeep(ItemList.value);
	},{ immediate:true });
	
</script>

<style lang="less" scoped>
	.dev_box{
		height: 350px;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}
	.dev_header{
		font-size: 16px;
		.ant-input-affix-wrapper{
			width:200px;
			height: 40px;
		}
		span{
			color:@success700;
		}
	}
	table,tbody {
	    display: block;
	    height: 200px;
		// flex:1;
	    border: 0;
	    border-spacing: 0;
	    border-collapse: collapse;
	    cursor: default;
	}
	tbody {
	    overflow-y: scroll;
	}
	
	table thead,tbody tr {
	    display: table;
	    width: 100%;
	    table-layout: fixed;
	}
	
	table thead {
	    width: calc(100% - 1em)
	}

	table{
		margin-top: 10px;
		width: 100%;
		th{
			background-color: #f4f7fa;
			color:#949cb8;
		}
		td,th{
			padding: 10px 0;
		}
		.table_td{
			td{
				text-align: center;
			}
			td:nth-of-type(1){
				padding-left: 20px;
				text-align: left;
			}
		}
	}
	.bottom-btn{
		flex:1;
		align-items: flex-end;
		justify-content: space-between;
	}
</style>